import React, { useEffect } from 'react';
import TemplateSelector from '@/components/TemplateSelector';
import ParameterInputPanel from '@/components/ParameterInputPanel';
import DocumentPreview from '@/components/DocumentPreview';
import ExportPanel from '@/components/ExportPanel';
import TemplateManagementPanel from '@/components/TemplateManagementPanel';
import TemplateEditorModal from '@/components/TemplateEditorModal';
import ImportTemplateModal from '@/components/ImportTemplateModal';
import { TemplateProvider } from '@/contexts/TemplateContext';
import * as templateService from '@/services/templateService';

const Home: React.FC = () => {
  useEffect(() => {
    // 初始化模板存储
    templateService.initializeTemplateStorage();
  }, []);
  
  return (
    <TemplateProvider>
      <div className="min-h-screen bg-gray-100 p-6">
        <div className="max-w-7xl mx-auto">
          <header className="mb-8 text-center">
        <h1 className="text-3xl font-bold text-gray-800 mb-2">政府公文文书通用生成系统</h1>
             <p className="text-gray-600">快速生成标准化的政府公文文书</p>
          </header>
          
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {/* 左侧面板 - 模板选择和参数输入 */}
            <div className="lg:col-span-1 space-y-4">
              <TemplateSelector />
              <ParameterInputPanel />
              <TemplateManagementPanel />
            </div>
            
            {/* 右侧面板 - 文档预览和导出 */}
            <div className="lg:col-span-2 h-[calc(100vh-200px)] flex flex-col">
              <DocumentPreview />
              <ExportPanel />
            </div>
          </div>
        </div>
        
        {/* 模态框 */}
        <TemplateEditorModal />
        <ImportTemplateModal />
      </div>
    </TemplateProvider>
  );
};

export default Home;